<template>
    <div>
      <el-button size="small" @click="addTab(editableTabsValue)">
        添加样例
      </el-button>
    </div>
    <el-tabs
      v-model="editableTabsValue"
      type="card"
      class="demo-tabs"
      closable
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
       <pre style="margin: 0;">
nums =

<el-input v-model.lazy="item.input" :rows="2"
    type="textarea" placeholder="Please input" />

target =

<el-input v-model="item.output"  :rows="2" placeholder="Please input" />
       </pre>
      </el-tab-pane>
    </el-tabs>
  </template>
  <script lang="ts" setup>
  import { ref,onMounted} from 'vue'
  import emitter from '@/util/emit'
  import { mainStore } from '@/store';
  import { JudgeCase } from '@/pojo/entity';
  import {Base64} from 'js-base64'
  //获取全局变量
  const store=mainStore()
  let tabIndex = 2
  const editableTabsValue = ref('2')
  const editableTabs = ref([
    {
      title: '样例1',
      name: '1',
      input:'[3,2,4]',
      output:'6'
    },
    {
      title: '样例2',
      name: '2',
      input:'[3,2,4]',
      output:'8'
    },
  ])

  
  


  const addTab = (targetName: string) => {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: '样例'+tabIndex,
      name: newTabName,
      input:'',
      output:''
    })
    editableTabsValue.value = newTabName
  }
  const removeTab = (targetName: string) => {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }
  
    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }

  onMounted(()=>{
    emitter.on('Run',(e)=>{
      if(e){
      //for循环遍历editableTabs，获取每个input和output的值，并base64编码input，存放map集合，key为name
  
      editableTabs.value.forEach((item)=>{
       
        store.JudgeCase.caseStdin.set(item.name,Base64.encode(item.input))
      })
    
 
      //将map集合存入JudgeCase

      store.RunCode();
      
      }

    })
  })
  </script>
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 0;
    outline: 0;
   
    font-size: 16px;
   
  }
  </style>
  